<template>
  <div>
    <iframe :src="pdfUrl" width="100%" height="600px" type="application/x-google-chrome-pdf"></iframe>
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import * as PDFJS from "pdfjs-dist";
import "pdfjs-dist/web/pdf_viewer.css";

PDFJS.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.mjs'

const canvasRef = ref()

const pdfUrl = ref()
async function renderPdf() {
  const loadingTask = PDFJS.getDocument('01-中共中央 国务院关于建立国土空间规划体系并监督实施的若干意见(2019).pdf')
  const pdf = await loadingTask.promise
  const page = await pdf.getPage(1) // 获取第一页
  let nums = pdf.numPages
  console.log(nums)
  const scale = 1.5 // 缩放比例
  const viewport = page.getViewport({ scale })

  const canvas = canvasRef.value
  const context = canvas.getContext('2d')
  canvas.height = viewport.height
  canvas.width = viewport.width

  const renderContext = {
    canvasContext: context,
    viewport
  }
  await page.render(renderContext).promise
}
onMounted(() => {
  renderPdf()
  pdfUrl.value = 'test3.pdf'
})
</script>

<style lang="scss" scoped></style>
